<?

	$JO_index_unit[ "promotion"	] = array( );
	$JO_index_unit[ "notice"	] = array( );
	$JO_index_unit[ "magazine"	] = array( );
	$JO_index_unit[ "vote"		] = array( );
	$JO_index_unit[ "beta"		] = array( );

	$JO_index_unit[ "artist"	] = array( );
	$JO_index_unit[ "music"		] = array( );
	$JO_index_unit[ "album"		] = array( );
	$JO_index_unit[ "video"		] = array( );
	$JO_index_unit[ "show"		] = array( );
	$JO_index_unit[ "drama"		] = array( );
	$JO_index_unit[ "movie"		] = array( );
	$JO_index_unit[ "fashion"	] = array( );
	$JO_index_unit[ "favorite"	] = array( );
	$JO_index_unit[ "phone"		] = array( );



	////
	///
	//	Index

		$query = "
			SELECT		*
			FROM		`index`
			WHERE		`delete` IS NULL
			ORDER BY	`priority`	DESC,
						`insert`	DESC,
						`key`		ASC
		";

		$recordSet = $JO_MySQL -> query( $query );

		if( $recordSet -> num_rows ) while( $record = $recordSet -> fetch_array( ) ) {

			if( is_array( $JO_index_unit[ $record[ "unit" ] ] ) ) array_push( $JO_index_unit[ $record[ "unit" ] ], array(
				"subject"	=> $record[ "subject"	],
				"content"	=> $record[ "content"	],
				"mark"		=> $record[ "mark"		],
				"image"		=> $record[ "image"		],
				"link"		=> $record[ "link"		]
			) );

		}



	////
	///
	//	Unit

		function JO_index_unit( $unit, $subject, $class = "JO_box_240", $count = 3 ) {

			global $JO_index_unit;

			if( strpos( $class, "JO_bar_" ) !== false ) $gap = 1;

			$object = $unit[ 0 ] . substr( str_replace( " ", "", ucwords( $unit ) ), 1 );

			echo "

				<div
					class	= '" . $class . "'
					style	= 'height: " . ( $count * 80 ) . "px;'
				>

					<h1>" . ucwords( $subject ) . "</h1>

					<h2>

			";

			for( $i = 0; $i < ceil( count( $JO_index_unit[ $unit ] ) / $count ); $i ++ ) echo "

						&nbsp;
						<a
							href		= '#this'
							onmouseover	= 'JO_block( \"JO_" . $object . "_\", " . count( $JO_index_unit[ $unit ] ) . ", " . ( $i * $count ) . ",  " . ( ( $i * $count ) + ( $count - 1 ) ) . " );'
						>" . ( $i + 1 ) . "</a>

			";

			echo "
					</h2>
			";

			foreach( $JO_index_unit[ $unit ] as $key => $value ) echo "

					<div
						id		= 'JO_" . $object . "_" . $key . "'	
						class	= 'JO_photo_240_72'
						style	= 'position: absolute; left: " . ( 3 + $gap ) . "px; top: " . ( ( ( $key % $count ) * 80 ) + 27 + $gap ) . "px; " . ( $key > ( $count - 1 ) ? "display: none;" : "" ) . "'
					>

						<a href='" . ( $value[ "link" ] ? $value[ "link" ] : "#this" ) . "'>

							<img src='" . ( $value[ "image" ] ? $value[ "image" ] : "JO_80_image/JO_12_photo_72.jpg" ) . "'/>

							<h3>" . $value[ "subject"	] . "</h3>

							<h4>" . $value[ "mark"		] . "</h4>

							<p>" . str_replace( "\r\n", "<br />", $value[ "content" ] ) . "</p>

						</a>

					</div>

			";

			echo "
				</div>
			";

		}

?>



<!-- Area 1 -->

	<div class="JO_relative" style="width: 960px; height: 124px;">



		<!-- What can be in here...? -->

			<!-- <div class="JO_box_240" style="position: absolute; left: 0px; top: 0px; border-color: red;padding: 3px;">
				<a href="#">
					<img alt="" src="JO_80_image/Banner_add_224_112.jpg">
				</a>
			</div>  -->
			
			<div class="JO_box_240" style="position: absolute; left: 0px; top: 4px;padding: 0px;width: 232px;border: none; margin-top: 0px;">
				<a href="#">
					<img alt="" src="JO_80_image/Banner_add_224_112.jpg" width="232px" height="120px" style="border: none;">
				</a>
			</div>

		<!-- Promotion -->

			<div class="JO_absolute" style="left: 240px; top: 0px; width: 718px; height: 123px; border: 1px dashed #C2C2C2; border-top: 0px;">

				<? foreach( $JO_index_unit[ "promotion"	] as $key => $value ) { ?>

					<div id="JO_index_promotion_<?= $key + 1 ?>" class="JO_relative JO_none">

						<a href="<?= $value[ "link" ] ?>">

							<img class="JO_absolute" src="<?= $value[ "image" ] ?>" style="left: 3px; top: 4px; width: 472px; height: 116px;" />

							<div
								class	= "JO_absolute JO_bold"
								style	= "margin: 0px; padding: 0px 0px 0px 8px; left: 479px; top: 8px; width: 228px;"
							><?= $value[ "subject" ] ?></div>

							<div
								class	= "JO_absolute JO_right"
								style	= "margin: 0px; padding: 0px 7px 0px 0px; left: 597px; top: 8px; width: 111px;"
							><?= $value[ "mark" ] ?></div>

							<div
								class	= "JO_absolute"
								style	= "margin: 0px; padding: 0px 0px 0px 8px; left: 479px; top: 32px; width: 228px;"
							><?= $value[ "content" ] ?></div>

						</a>

					</div>

				<? } ?>

				<? foreach( $JO_index_unit[ "promotion"	] as $key => $value ) { ?>

					<div
						id			= "JO_index_button_<?= $key + 1?>"
						class		= "JO_number JO_absolute"
						style		= "left: <?= ( floor( $key / 4 ) * 30 ) + 7 ?>px; top: <?= ( ( $key % 4 ) * 28 ) + 8 ?>px;"
						onmouseover	= "
							clearInterval( JO_index_interval );
							JO_index_rotation( <?= $key + 1?> );
						"
					><?= $key + 1 ?></div>

				<? } ?>

				<script>

					var JO_index_count = <?= $key + 1 ?>;

					function JO_index_rotation( key ) {

						document.getElementById( "JO_index_button_"		+ JO_index_count ).style.color		= "";
						document.getElementById( "JO_index_promotion_"	+ JO_index_count ).style.display	= "none";

						if( key )	JO_index_count = key;
						else		JO_index_count ++;

						if( JO_index_count > <?= $key + 1 ?> ) JO_index_count = 1;

						document.getElementById( "JO_index_button_"		+ JO_index_count ).style.color		= "white";
						document.getElementById( "JO_index_promotion_"	+ JO_index_count ).style.display	= "block";

					}

					JO_index_rotation( );

					var JO_index_interval = setInterval( "JO_index_rotation( )", 2000 );

				</script>

			</div>


	</div>



<!-- Area 2 -->

	<div class="JO_relative" style="width: 960px;">

		<? JO_index_unit( "notice",		JO( array( "EN" => "Notice",	"KO" => "공지",	"VI" => "Thông Báo"		) ), "JO_bar_240 JO_left", 5 ); ?>
		<? JO_index_unit( "magazine",	JO( array( "EN" => "Magazine",	"KO" => "매거진",	"VI" => "Tạp Chí"		) ), "JO_bar_240 JO_left", 5 ); ?>
		<? JO_index_unit( "vote",		JO( array( "EN" => "Vote",		"KO" => "투표",	"VI" => "Bình Chọn"		) ), "JO_bar_240 JO_left", 5 ); ?>
		<div class="JO_left" style="width: 240px;">

			<? JO_index_unit( "beta",		JO( array( "EN" => "Business",	"KO" => "Business",	"VI" => "Kinh Doanh"	) ), "JO_bar_240 JO_left", 2 ); ?>

			<div class="JO_box_240 JO_both">

				<h1><a href="?JO_content=6">JukeOn™ Audition</a></h1>

				<div style="top: 4px; margin-bottom: 8px;">

					<? $temp = rand( 0, 1 ); ?>

					<iframe
						title		= "YouTube video player"
						width		= "216"
						height		= "192"
						<? if( $temp == 0 ){ ?>src = "http://www.youtube.com/embed/39xiF08kCQY"<? } ?>
						<? if( $temp == 1 ){ ?>src = "http://www.youtube.com/embed/ZVJhaxcXd1E"<? } ?>
						frameborder	= "0"
						allowfullscreen
					></iframe>

				</div>

			</div>

		</div>	

		<!--<div class="JO_bar_720 JO_left">

			<h1>Fashion</h1>

			<h2>
				<a href="">Top</a> &nbsp;
				<a href="">Bottom</a> &nbsp;
				<a href="">Dress</a> &nbsp;
				<a href="">Jacket</a> &nbsp;
				<a href="">Underwear</a> &nbsp;
				<a href="">Accessory</a> &nbsp;
				<a href="">Shoe</a> &nbsp;
				<a href="">Etc.</a> &nbsp;
			</h2>

			<? for( $i = 0; $i < 12; $i ++ ) { ?>

				<a href="?JO_product=1" class="JO_fashion">

					<img src="http://localhost/JO/JO/JO_81_image_index/cloth_<?= $i + 1 ?>.jpg" style="width: 112px; height: 150px;"/>

					<h3>Product Name</h3>
					<h4>1,300,000 VND</h4>

				</a>

			<? } ?>

		</div>-->

	</div>



<? if( $_SESSION[ "JO_account_authority" ] == "administrator" ) { ?>

	<div class="JO_relative" style="width: 960px;">

		<? JO_index_unit( "video",		JO( array( "EN" => "Video",		"KO" => "Video",	"VI" => "Video"		) ), "JO_bar_240 JO_left", 5 ); ?>

		<div class="JO_bar_720 JO_left">

			<h1>Fashion</h1>

			<h2>
				<a href="">Top</a> &nbsp;
				<a href="">Bottom</a> &nbsp;
				<a href="">Dress</a> &nbsp;
				<a href="">Jacket</a> &nbsp;
				<a href="">Underwear</a> &nbsp;
				<a href="">Accessory</a> &nbsp;
				<a href="">Shoe</a> &nbsp;
				<a href="">Etc.</a> &nbsp;
			</h2>

			<? for( $i = 0; $i < 12; $i ++ ) { ?>

				<a href="?JO_product=1" class="JO_fashion">

					<img src="http://localhost/JO/JO/JO_81_image_index/cloth_<?= $i + 1 ?>.jpg" style="width: 112px; height: 150px;"/>

					<h3>Product Name</h3>
					<h4>1,300,000 VND</h4>

				</a>

			<? } ?>

		</div>

	</div>

<? } ?>
